<template>
  <div class="profile-page">
    <div class="content">
      <el-avatar size="60" :src="avatarUrl" />
      <p>
        <el-tag type="primary" v-if="userInfo.role === 'admin'">管理员</el-tag>
        <el-tag type="success" v-else>普通用户</el-tag>
      </p>
      <h3>{{ userInfo.username }}</h3>
    </div>
  </div>
</template>

<script setup>
import storage from '@/utils/storage';

const avatarUrl = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
const userInfo = storage.get('userInfo')

</script>

<style lang="scss" scoped>
.profile-page {
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    p {
      margin: 10px 0;
    }
  }
}
</style>